<script setup lang="ts">
import { useSettingStore } from '@/stores/modules/setting'
let settingStore = useSettingStore()
function handleClick() {
  ElNotification({
    title: 'Prompt',
    message: 'This is a message that does not automatically close'
  })
}
const open2 = () => {
  ElNotification({
    title: 'Prompt',
    message: '你好',
    duration: 1000
  })
}
//更换主题色
import generateColors from '@/utils/color'
let themeColor = ref(settingStore.theme)

toggleTheme()
function toggleTheme() {
  settingStore.toggleTheme(themeColor.value)
  let colorMap: any = generateColors(settingStore.theme)
  const el = document.documentElement
  el.style.setProperty('--el-bg-color', settingStore.theme)
  el.style.setProperty('--el-color-primary', settingStore.theme)
  Object.keys(colorMap).forEach((key) => {
    el.style.setProperty(`--el-color-primary-${key}`, colorMap[key])
  })
}
let isDark = ref<boolean>(false)
function toggleDark(){
  let html = document.documentElement
  if(isDark.value){
    html.className = 'dark'
  }else{
    html.className = ''
  }
}
</script>

<template>
  <main class="main">
    更换主题色
    <el-color-picker v-model="themeColor" @change="toggleTheme" />
    <div></div>
    切换暗黑模式
    <el-switch v-model="isDark" active-icon="Check" inactive-icon="Close" @change="toggleDark"/>
    <div class="flex gap-2">
      <el-tag type="primary">Tag 1</el-tag>
      <el-tag type="primary" effect="plain" round>aawfwewe </el-tag>
    </div>
    <el-link type="primary">primary</el-link>

    <div></div>

    <el-button @click="open2" type="primary">hei</el-button>

    <div class="theme">12</div>
    <div class="bg">12</div>
    <div style="height: 100vh;"></div>
    12
  </main>
</template>
<style lang="scss">
.main {
  .div {
    color: #ddd;
    background: $bgColor;
  }
  .gap-2 {
    margin-top: 230px;
  }
  .theme {
    height: 100px;
    margin: 10px;
    background: var(--el-color-primary);
  }
  .bg {
    height: 50px;
    border: 1px solid var(--el-color-primary-light-5);
    background: var(--el-color-primary-light-9);
  }
}
</style>
